<template>
  <el-form-item label="礼品包类型" prop="type" :rules="rules">
    <el-radio-group v-model="modelValue" @change="handleChange" :disabled="disabled">
      <el-radio v-for="item in radioList" :label="item.value">{{item.label}}</el-radio>
    </el-radio-group>
  </el-form-item>
</template>

<script lang="ts" setup>
import {WritableComputedRef} from "vue";

const props = withDefaults(defineProps<{
  modelValue: number
  radioList?: {label: string, value: number}[],
  disabled?: false
}>(), {
  disabled: false,
  radioList: () => [{
    label: '全部',
    value: -1,
  }, {
    label: '任选其一',
    value: 1,
  // }, {
  //   label: '任选其二',
  //   value: 'two'
  // }, {
  //   label: '任选其三',
  //   value: 'three'
  }],
  modelValue: -1
})

const emits = defineEmits<{
  (e: 'update:model-value', value: string): void,
  (e: 'change', value: string): void
}>()


const modelValue: WritableComputedRef<string> = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:model-value', newValue)
  },
})

const handleChange = (value: string) => {
  emits('change', value)
}

const rules = [{
  message: '请选择礼品包类型',
  trigger: 'change',
  required: true
}]
</script>

<style scoped lang="scss">

</style>
